.events-title-row {
  display: flex;
  align-items: center;

  h1 {
    margin: 0;
  }

  a .icon {
    font-size: 1.2rem;
    height: 1.2rem;
    line-height: 1.2rem;
  }
}

@mixin events-theme($theme) {
  $background: map-get($theme, background);
  $foreground: map-get($theme, foreground);
  $is-dark-theme: map-get($theme, is-dark);
  $card-background-color: map-get($background, cards);
  $border-color: if($is-dark-theme, rgba(#8795a1, 0.2), rgba(#8795a1, 0.2));
  $primary: map-get($theme, primary);
  $primary-color: map-get($primary, 500);

  .mat-column-payload {
    position: relative;
    white-space: nowrap;
    max-width: 200px;
    overflow: hidden;
    text-overflow: hidden;

    .btn-wrapper {
      background-color: $card-background-color;
      transition: background-color 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
      border: 1px solid $border-color;
      box-sizing: border-box;
      border-radius: 0.5rem;
      outline: none;
      box-shadow: 0 0 3px #0000001a;
      height: 36px;
      width: 36px;
      position: absolute;
      display: none;
      justify-content: center;
      align-items: center;
      right: 0;
      top: 50%;
      transform: translateY(-50%);

      .open-in-dialog-btn {
        display: flex;
        align-items: center;
        justify-content: center;
      }
    }

    &:hover {
      .btn-wrapper {
        display: flex;
      }
    }
  }

  .filter-button-wrapper {
    display: flex;
    justify-content: space-between;
    position: relative;
    user-select: none;
    margin-left: 1rem;

    .filter-count {
      font-size: 14px;
      color: $primary-color;
      margin-left: 0.5rem;
    }
  }
}

.events-desc {
  font-size: 14px;
}

.editor-row {
  display: flex;
  flex-direction: column;
  padding: 2px 0;

  .name,
  .id {
    margin-bottom: 0.25rem;
  }

  .state {
    align-self: flex-start;
  }
}

.aggregate-row {
  display: flex;
  flex-direction: column;
  align-items: flex-start;

  .id {
    margin-bottom: 0.25rem;
  }
}
